<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米官网</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/common.css">
</head>
<body>
<div class="quanju">
    <div class="one">
        <div class="loginbar">
            <div class="loginbar-1">
                <a href="#">小米网 </a>
                <a href="#">MIUI </a>
                <a href="#">米聊 </a>
                <a href="#">游戏 </a>
                <a href="#">多看阅读 </a>
                <a href="#">云服务 </a>
                <a href="#">小米网移动版 </a>
                <a href="#">Select region </a>
                <span href="#">米粉丝节答疑 </p>
            </div>
            <div class="loginbar-2">
                <a href="#">注册 |</a>
                <a href="#">登录</a>
            </div>
        </div>
    </div>

<div class="two">
    <div class="search">
        <div class="search-1">
            <img src="images/logo.png" alt="">
        </div>
        <table class="search-2">
            <tr>
                <td class="clock"><img src="images/clock.png" alt=""></td>
                <td class="clock-1">
                <span>4月14日开放购买</span>
                </td>
            </tr>
            <tr>
                <td>
                  <input type="text" placeholder="搜索您需要的商品">
                  <img src="images/fangdajing.png" alt="">
                </td>
                <td>
                    <button class="btn btn-warning">购物车</button>
                </td>
            </tr>
        </table>
    </div>

    <div class="quanbu">
        <table class="table table-bordered ">
                <tr class="danger"> <!-- 第一行-->
                <th class="q2">全部商品分类</th> <!-- 第一行第一列-->
                <th class="q1"><span>首页</span> <!-- 第一行第二列-->  
                               <span>小米手机</span>   
                               <span>红米</span>   
                               <span>小米平板</span>   
                               <span>小米电视</span>   
                               <span>盒子</span>   
                               <span>路由器</span>   
                               <span>合约机</span>   
                               <span>服务</span>   
                               <span>社区</span></th>
                </tr>
                <tr class="active"><!-- 第二行-->
                <td rowspan="2"> <!-- 第二行第一列-->
                    <div>
                        <p class="q3">购买手机</p>
                        <p class="q4">小米Noto 小米4 红米 红米Noto</p> 
                    </div>
                    <div>
                        <p class="q3">购买电视与平板</p>
                        <p class="q4">小米电视 小米盒子 小米平板</p> 
                    </div>
                    <div>
                        <p class="q3">路由器与智能硬件</p>
                        <p class="q4">路由器 体重秤 净化器与滤芯</p> 
                    </div>
                    <div>
                        <p class="q3">插线板、移动电源与电池</p>
                        <p class="q4">小米移动电源 电池 充电器</p> 
                    </div>
                    <div>
                        <p class="q3">耳机音箱与存储卡</p>
                        <p class="q4">小米头戴式耳机 小米活塞耳机</p> 
                    </div>
                    <div>
                        <p class="q3">保护套与贴膜</p>
                        <p class="q4">保护套/保护壳 贴膜 防尘塞</p> 
                    </div>
                    <div>
                        <p class="q3">后盖与个性化配件</p>
                        <p class="q4">米键 后盖 贴纸 手机支架</p> 
                    </div>
                    <div>
                        <p class="q3">小米生活方式</p>
                        <p class="q4">服装 米兔 背包 生活周边</p> 
                    </div>
                </td>
                <td class="first"> <!-- 第二行第二列-->
                    <img src="images/banner1.png" alt="">
                </td>
                </tr>
                <tr class="active">  <!-- 第三行-->
                          <!-- 第三行第一列-->
                <td class="secod">   <!-- 第三行第二列-->
                    <img src="images/01.png" alt="">
                    <img src="images/02.png" alt="">
                    <img src="images/03.png" alt="">
                </td>
                </tr>
                </table>
    </div>
    <div class="nav">
        <span class="nav-1">小米明星单品&nbsp;</span>
         <span class="nav-3">根据机型选配件</span>
         <button class="nav-2">></button> <button class="nav-2"><</button>
    </div>
    <div class="start">
        <table class="table-1 table-gg">
            <tr class="active">
                <th class="start-1 th-1">
                    <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt="">
                    <p class="start-2">小米智能插座</p>
                    <p class="start-3">让普通家电变得智能</p>
                </th>
                <th class="start-1 th-1">
                    <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt="">
                    <p class="start-2">小米空气净化器</p>
                    <p class="start-3">高性能智能空气净化器立即预约</p>
                </th>
                <th class="start-1 th-1">
                    <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt="" >
                    <p class="start-2">小米活塞耳机简装版</p>
                    <p class="start-3">好声音源自活塞音腔，延续经典设计</p>
                </th>
                <th class="start-1 th-1">
                    <img src="images/aa.jpg" alt="" >
                    <p class="start-2">小米路由器</p>
                    <p class="start-3">顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
                </th>
            </tr>
        </table>
    

    <div class="new">
        <span class="new-1">新品上架</span>
        <span class="new-2">更多></span>
    </div>
   <!-- <table class="table-1 table-gg">
        <tr class=""> <!--第一行-->
        <!--    <td colspan="2" class="th-1">
            <img src="images/fanghezi0407xiao.jpg" alt="">
            </td>
            <td class="th-1 new-3">
                <p>小米手环</p>
                <p>79元</p>
                <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="" >
            </td>
            <td class="rowspan="4" th-1 new-3">
                <div class="new-5">
                    <button class="btn btn-default">特价商品</button>
                    <img src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="" >
                    <p class="text-danger">SanDisk32GB存储卡</p><br>
                    <p class="text-info">79元</p>
                    <p class="text-warning">还有更多特价商品</p>   
                </div> 
                <div class="new-5">
                    
                    <p>特惠配件套餐</p><br>
                    <p>手机必备配件组合购买</p>
                    <p>实惠更优惠</p>   
                    <img src="images/channel-list-cool.jpg" alt="" >
                </div> 
            </td>
        </tr>
        <tr class=""> <!--第二行-->
        <!--        <td class="new-3 th-1">
                    <p>5周年米兔钥匙扣</p>
                    <p>9.9元</p>
                    <img src="images/yaoshi.png" alt="">
                </td>
                <td rowspan="2" class="new-3 th-1">
                    <p>小米T恤路标MILOGO</p>
                    <p>39元</p>
                    <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="" >
                </td>
                <td rowspan="2" class="th-1 new-3">
                    <p>小米4实木后盖</p>
                    <p>69元</p>
                    <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="" >
                </td>
                
        </tr>
        <tr class=""><!--第三行-->
        <!--        <td class="new-3 th-1">
                    <p>QCY派Q8蓝牙耳机</p>
                    <p>59.9元</p>
                    <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="" >
                </td>
                
        <tr class=""> <!--第四行-->
        <!--        <td class="new-3 th-1">
                    <p>小米Note超薄保护壳</p>
                    <p>49元</p>
                    <img src="images/baohuke.png" alt="">
                </td>
                <td class="new-3 th-1">
                    <p>小米自拍杆</p>
                    <p>49元</p>
                    <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="" >
                </td>
                <td class="th-1 new-3">
                    <p>先锋CL31系列耳式耳机</p>
                    <p>99元</p>
                    <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt="" >
                </td>          
        </tr>
    </table> -->
    <div class="shangjia">
        <div class="shangjia-1">
            <img src="images/fanghezi0407xiao.jpg" alt="" >
        </div>
        <div class="shangjia-2">
            <p>小米手环<br>79元</p>
            <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="">
        </div>
        <div class="shangjia-3">
            <div class="sj-one">
                <div class="sj-one-1">
                    <div class="sj-one-1-2">
                        <button class="btn btn-danger">特价商品</button>
                        <h4>SanDisk32GB存储卡</h4>
                        <h5>79元</h5>
                        <p>还有更多特价商品</p>
                    </div>
                    <div class="sj-one-1-3">
                        <img src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
                    </div>
                </div>
                <div class="sj-one-2">
                    <div class="sj-one-2-1">
                        <h4>特惠配件套餐</h4>
                        <p>手机必备配件组合购买</p>
                        <p>还有更多特价商品</p>
                    </div>
                    <div class="sj-one-2-2">
                        <img src="images/channel-list-cool.jpg" alt="">
                    </div>
                </div>
                <div class="sj-one-3">
                    <div class="sj-one-3-1">
                        <h4>我爱酷玩</h4>
                        <p>邂逅炫酷的电子产品</p>
                        <p>结交趣味相投的朋友</p>
                    </div>
                    <div class="sj-one-3-2">
                        <img src="images/channel-list-new.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="sj-two">
                <div class="sj-two-1">
                    <a href="#">企业用户采购通道&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <span>></span>
                </div>
                <div class="sj-two-2">
                    <a href="#">小米手机防伪查询&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <span>></span>
                </div>
                <div class="sj-two-3">
                    <a href="#">小米手机官翻版&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <span>></span>
                </div>
                <div class="sj-two-4">
                    <a href="#">小米路由器官翻版&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <span>></span>
                </div>
                <div class="sj-two-5">
                    <a href="#">米粉红包&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <span>></span>
                </div>
            </div>
            <div class="sj-three">
                <h5>话费充值</h5>
                <input type="text" placeholder="请输入手机号">
                <div class="dropdown">
                    <button class="btn-1 btn-default dropdown-toggle"
                    type="button" data-toggle="dropdown">
                100元
                <span class="caret"></span> 
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">100元</a></li>
                  <!--  <li class="divider"></li> -->
                    <li><a href="#">300元</a></li>
                    <li><a href="#">500元</a></li>
                </ul>
                </div>
                <p>实付价格98.4元起</p>
                <button class="btn-2 btn-default">立即充值</button>
            </div>
        </div>
        <div class="shangjia2-1">
            <div class="shangjia2-1-1">
                <p>5周年米兔钥匙扣<br>9.9元</p>
                <img src="images/yaoshi.png" alt="">
            </div> 
            <div class="shangjia2-1-2">
                <p>QCY派Q8蓝色耳机<br>59.9元</p>
                <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="">
            </div>         
        </div>
        <div class="shangjia2-2">
            <p>小米T恤路标MILOGO<br>39元</p>
            <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="">
        </div>
        <div class="shangjia2-3">
            <p>小米4实木后盖<br>69元</p>
            <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="" >
        </div>
        <div class="shangjia3-1">
            <p>小米Note超薄保护壳<br>49元</p>
            <img src="images/baohuke.png" alt="">
        </div>
        <div class="shangjia3-2">
            <p>小米自拍杆<br>49元</p>
            <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="" >
        </div>
        <div class="shangjia3-3">
            <p>先锋CL31系列耳式耳机<br>99元</p>
            <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" >
        </div>
    </div>
</div>
</div>
    <div class="three">
        <div class="footer">
            <div class="footer-1">
                    <img src="images/10.png" alt="" >
                    <p>1小时快修服务</p>
            </div>  
            <div class="footer-2"> 
                    <img src="images/11.png" alt="">
                    <p>7天无理由退货</p>
            </div>
            <div class="footer-3">
                    <img src="images/12.png" alt="">
                    <p>15天免费换货</p>
            </div>
            <div class="footer-4">
                    <img src="images/13.png" alt="">
                    <p>满150元包邮</p>
            </div>  
            <div class="footer-5">
                    <img src="images/14.png" alt="">
                    <p>520余家售后网点<br></p>
            </div>    
        </div>
        <div class="footer-one">
          <div class="footer-6">
            <h3>帮助中心</h3>
            <p>购物指南</p>
            <p>支付方式</p>
            <p>配送方式</p>
          </div>
          <div class="footer-7">
            <h3>服务支持</h3>
            <p>售后政策</p>
            <p>自助服务</p>
            <p>相关下载</p>
          </div>
          <div class="footer-8">
            <h3>小米之家</h3>
            <p>小米之家</p>
            <p>服务网点</p>
            <p>预约亲临到店服务</p>
          </div>
          <div class="footer-9">
            <h3>关于小米</h3>
            <p>了解小米</p>
            <p>加入小米</p>
            <p>联系我们</p>
          </div>
          <div class="footer-10">
            <h3>关注我们</h3>
            <p>新浪微博</p>
            <p>小米部落</p>
            <p>官方微信</p>
          </div>
          <div class="footer-11">
            <h3>400-100-5678</h3>
            <p>周一至周日8:00-18:00</p>
            <p>（仅收市话费）</p>
            <button class="btn btn-info">24小时在线服务</button>
          </div>
        </div>
        <div class="footer-two">
            <div class="footer-12">
            <p>小米旗下网站：小米网 | MIUI | 米聊 | 多看书城 | 小米路由器 | 繁体香港 | 繁体台湾 | English | 小米后院 | 小米天猫店 | 小米淘宝直营店 | 小米网盟</p>    
            <p>@mi.com 京ICP证110507号 京ICP备1004644号 京网文[2014]0059-0009号</p>    
        </div>
        </div>
        <div class="footer-three">
           <img src="images/16.png" alt="" >
           <button class="btn btn-default">
            简体中文 <span class="caret"></span></button>
        </div>
    </div>
    </div>
    <script src="bootstrap/js/jquery-3.3.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>